<template>

  <div ref="transferBoxMain">
    <div class="title">
      <span class="line"></span>
      <span><i class="el-icon-folder"></i> 文件列表</span>
      <el-button
        style="
          float: right;
          margin-left: 10px;
          margin-right: 10px;
          margin-top: 6px;
          color: #fff;
        "
        type="text"
        @click="printPdf"
        ><i class="el-icon-printer"></i> {{$t('wechat.dayinSms')}}</el-button
      >
    </div>
    <!-- <a-input-search
      v-model="searchkey"
      placeholder="输入关键词搜索"
      style="width: 430px;margin-left:10px;margin-bottom:10px;"
      @search="init"
    /> -->
    <div class="transferClass" id="transferClassid" @scroll="handleScroll" ref="list1">
      <div class="itemTrans" @click.stop="jumpOrderPosition(item)" v-for="(item,index) in tableData" :key="index" title="点击定位到聊天">
        <img width="50px" height="50px" src="../../../assets/24gf-fileEmpty.png" alt="">
        <div style="width: 80%;">
        <div>文件名：{{ item.CONTENT }}</div>
        <div>来源：{{item.contactname}}</div>
        <div>MD5：{{item.filemd5}}</div>
        <div>{{ formateDate(item.msgtime) }}</div>
        </div>
      </div>
      <div class="loadingBox" v-if="showLoading" style="color:#2196f3;margin-top:20px;"><i :class="loadClass" style="color:#2196f3"></i> {{ loadingText }}</div>
    </div>

    <a-modal width="300px" v-model="showRemark" :getContainer="getRefsAff"
      :maskClosable="false" title="提示" @ok="handleOk">
      <p>{{$t('wechat.biaojibeizhu')}}</p>
      <p><el-input type="textarea" v-model="remark"></el-input></p>
    </a-modal>
  </div>
</template>
<script>
import {
getTransfer,
} from "@/api/transfer/transfer_api";
import { parseTime } from "@/utils/index";
import { sendMarkOrderApi } from '@/api/markApi/index'
import { getWxMediaInfo,getFormateCode } from '@/api/weChat/weChat_api'
const x2js=require('x2js');
const x2jsone=new x2js(); //实例
import { throttle } from 'lodash';
export default {
  name: "wxFile",
  props: ["sendData"],
  data() {
    return {
      scrollTopData:0,
      loadClass:'el-icon-loading',
      loadingText:'正在加载. . .',
      showLoading:false,
      showPrint:false,
      showRemark:false,
      remark:'',
      id:'',
      headerTitle: [],
      tableData: [],
      offset: 1,
      limit: 20,
      total: 0,
      searchkey:'',
      label:''
    };
  },
  watch: {
    "$store.state.account.weChat": function () {
      // this.offset=1
      if(this.sendData.list_offset){
      this.offset=1;
      this.limit=20*this.sendData.list_offset;
    }else{
      this.offset=1
    }
      this.label=sessionStorage.getItem('label')
      this.init();
    },
  },
  created() {
    // this.offset=1
    if(this.sendData.list_offset){
      this.offset=1;
      this.limit=20*this.sendData.list_offset;
    }else{
      this.offset=1
    }
    this.init();
  },
  methods: {
    jumpOrderPosition(item){

        // item['proof_num'] = this.sendData.proof_num;
        // item['username'] = sessionStorage.getItem('usernameTitle');
        // item['model'] = 'wechat';
        // item['msgtime'] = item.msgtime;
        // item['contact_username'] = item.contactname;
        // item['id'] = item.id;
        // item['list_offset'] = this.offset;
        // item['msg_offset'] = 1;
        // item['app_name'] = item.contactname.includes('@')?'群组':'好友';

        item['proof_num'] = this.sendData.proof_num;
        item['username'] = sessionStorage.getItem('usernameTitle');
        item['model'] = 'wechat1';
        item['msgtime'] = item.msgtime;
        item['contact_username'] = item.contactname;
        item['id'] = item.id;
        item['list_offset'] = this.offset;
        item['msg_offset'] = 1;
        item['app_name'] = item.contactname.includes('@')?'群组':'好友';
        item['wxChildrenNode'] = true;
        item['scrollTop'] = this.scrollTopData;
        item['childrenModel'] = 'WXfile2';
        item['account_id'] = this.sendData.account_id;

        // 储存类型
        sessionStorage.setItem('model',"wechat")
        // 储存节点数据
        sessionStorage.setItem('sumData',JSON.stringify(item))
        // 激活跳转组件
        this.$store.commit('SET_ORDERDATA',Date.parse(new Date()))
        sessionStorage.setItem('only',true);
    },
    handleScroll:throttle(function(){
      const list = this.$refs.list1;
      this.scrollTopData = list.scrollTop;
      // 判断滚动到底部
      if (list.scrollTop + list.clientHeight+10+10 >= list.scrollHeight) {
        this.showLoading=true;

        if(this.tableData.length<this.total){
          this.loadClass = 'el-icon-loading';
          this.loadingText = '正在加载. . .';
          this.offset++;
          // 加载更多数据
          let that = this;
          // setTimeout(()=>{
            that.initTransfer();
          // },1000)
        }else{
          this.loadClass = 'el-icon-success';
          this.loadingText = '到底了，没有更多了！';
        }
      }
    }),
    getRefsAff(){
      return  this.$refs.transferBoxMain;
    },
    handleOk(){
        let data={
        navigation_list:sessionStorage.getItem('arr').split(','),
        model:this.sendData.model,
        isChat:0,
        app_name:'',
        account_id:this.sendData.account_id,
        proof_num:this.sendData.proof_num,
        list_offset:this.offset,
        list_limit:this.limit,
        remark:this.remark,
        class:this.sendData.class,
        label:this.sendData.label,
        id:Number(this.id)
      }
      sendMarkOrderApi(data).then(res=>{
        this.showRemark=false;
        this.$message({
          message: '标记数据成功！',
          type: 'success'
        });
        this.init()
      })
    },
    // 添加标记点
    markOrder(item){
      this.id=item.id;
      this.showRemark=true;
    },
    // 格式化xml
    formateCard(item){
        let xml=item.contant,
        xmlDo=x2jsone.xml2js(xml);
        return xmlDo
    },
    formateDate(date) {
      return parseTime(date);
    },
    init() {
      this.tableData = [];
      this.initTransfer();
    },
    initTransfer() {
      if(sessionStorage.getItem('searchAll')!==null){
            this.searchkey = sessionStorage.getItem('searchAll');
        }

      let data = {
        proof_num: this.sendData.proof_num,
        account_id: Number(this.sendData.account_id),
        offset:this.offset,
        limit:this.limit
      };
      getWxMediaInfo(data,'/tencent/file/list').then((res) => {
        if(res.data.length == 0){
          this.loadClass = 'el-icon-success';
          this.loadingText = '到底了，没有更多了！';
          return;
        }
        for (let index = 0; index < res.data.length; index++) {
          const element = res.data[index];
          this.tableData.push(element)
        }
        // this.tableData = res.data;
        this.total = res.data[0].cnt;
        if(this.sendData.list_offset){
          this.$nextTick(() => {
            this.$refs.list1.scrollTop=this.sendData.scrollTop;
            this.offset = this.sendData.list_offset
            this.limit = 20;
          })

        }
      });
    },
    handleSizeChange(val) {
      this.limit = val;
      this.init();
    },
    handleCurrentChange(val) {
      this.offset = val;
      this.init();
    },
       printPdf(){
        printJS({
          printable: 'transferClassid',// 直接传入元素 id
          type: 'html',
          targetStyles: ['*'],// 保留页面样式
          scanStyles: false,
          style:`.loadingBox{
  width: 100%;
  text-align: center;
  margin-bottom:50px;
}
.timeBox{
  position: absolute;
  bottom: 0px;
  right: 10px;
}
.hongbaotext{
  display:flex;
  align-items: center;
}
.itemTrans{
  height: 90px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px;
  border: 1px solid #ededed;
  position: relative;
  cursor: pointer;
  font-size:12px
}
.itemTrans:hover{
  background: #e4e4e4;
}
.transferClass{
  height: 90%;
  overflow-y: auto;
}
.transferClass::-webkit-scrollbar {
  width: 10px;
}
/* <!--修改 滚动条的 下面 的 样式--> */
.transferClass::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/* <!--修改 滑块 --> */
.transferClass::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
  .badgeBox{
  width: 50px;
  height: 23px;
  border-radius: 10px;
  color: #fff;
  background: #f56c6c;
  text-align: center;
  line-height: 23px;
  font-size: 12px;
}
.aTag {
  text-decoration: underline;
  color: rgb(34, 109, 248);
}
.aTag:hover {
  color: #4f00a8;
}
.title {
  width: 100%;
  height: 50px;
  background: #2b2f3a;
  margin-bottom: 20px;
  font-size: 0.1rem;
  line-height: 50px;
  padding-left: 20px;
  color: #fff;
}
.line {
  width: 8px;
  height: 100%;
}`
});
    },
  },
};
</script>

<style scoped>
.loadingBox{
  width: 100%;
  text-align: center;
  margin-bottom:50px;
}
.timeBox{
  position: absolute;
  bottom: 0px;
  right: 10px;
}
.hongbaotext{
  display:flex;
  align-items: center;
}
.itemTrans{
  height: 90px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 10px;
  border: 1px solid #ededed;
  position: relative;
  cursor: pointer;
  font-size: 12px;
}
.itemTrans:hover{
  background: #e4e4e4;
}
.transferClass{
  height: 90%;
  overflow-y: auto;
}
.transferClass::-webkit-scrollbar {
  width: 10px;
}
/* <!--修改 滚动条的 下面 的 样式--> */
.transferClass::-webkit-scrollbar-track {
  background-color: rgb(252, 252, 252);
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
/* <!--修改 滑块 --> */
.transferClass::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  -webkit-border-radius: 2em;
  -moz-border-radius: 2em;
  border-radius: 2em;
}
  .badgeBox{
  width: 50px;
  height: 23px;
  border-radius: 10px;
  color: #fff;
  background: #f56c6c;
  text-align: center;
  line-height: 23px;
  font-size: 12px;
}
.aTag {
  text-decoration: underline;
  color: rgb(34, 109, 248);
}
.aTag:hover {
  color: #4f00a8;
}
.title {
  width: 100%;
  height: 50px;
  background: #2b2f3a;
  margin-bottom: 20px;
  font-size: 0.1rem;
  line-height: 50px;
  padding-left: 20px;
  color: #fff;
}
.line {
  width: 8px;
  height: 100%;
}
</style>
